<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-03-20 01:48
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <!--  布局的整体插槽-->
  <x-render-extend-slot
    v-if="hasSlot(attrs.layoutName)"
    :componentFunc="getSlot(attrs.layoutName)"
    :data="attrs"
  ></x-render-extend-slot>
  <div v-else class="x-render-layout-steps-container">
    <a-steps v-bind="attrs" v-model="attrs.current" style="margin-bottom: 8px">
      <template v-for="(item) in children">
        <!--   布局的每一项插槽-->
        <x-render-extend-slot
          v-if="hasSlot(attrs.layoutName + upperNameFirstChar(item.code))"
          :key="item.code"
          :componentFunc="getSlot(attrs.layoutName + upperNameFirstChar(item.code))"
          :data="attrs"
          :value="item"
        ></x-render-extend-slot>
        <a-step v-else :key="item.code" v-bind="item"></a-step>
      </template>
    </a-steps>
    <template v-for="(item,index) in children">
      <x-render-form-row
        v-show="index === attrs.current"
        :key="item.code"
        :data="item.children"
        v-on="$listeners">
      </x-render-form-row>
    </template>
  </div>
</template>

<script>
import { COMPONENT_TYPE, CUSTOM_EVENT_TYPE } from '../../constants'
import XRenderExtendSlotMixin from '../../XRenderMixins/XRenderExtendSlotMixin'
import XRenderComponentMixin from '../../XRenderMixins/XRenderComponentMixin'

export default {
  name: COMPONENT_TYPE.LAYOUT_STEPS,
  mixins: [XRenderExtendSlotMixin, XRenderComponentMixin],
  computed: {
    children: {
      get() {
        const { attrs } = this
        return attrs.children || []
      }
    }
  },
  methods: {
    changeHandler(key) {
      const { attrs } = this
      this.$emit(CUSTOM_EVENT_TYPE.CUSTOM_EVENT, {
        type: CUSTOM_EVENT_TYPE.CHANGE,
        compType: COMPONENT_TYPE.LAYOUT_STEPS,
        isLayout: true,
        layoutName: attrs.layoutName,
        value: key
      })
    }
  }
}
</script>

<style scoped lang="css">
.x-render-layout-steps-container {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
}
</style>
